<template>
  <div class="comment-item-wrapper">
    <div class="comment-username">{{ username }}</div>
    <div class="comment-intro">{{ comment }}</div>
    <!-- 评论底部栏 -->
    <div class="bottom-warpper">
      <div class="comment-date">{{ date }}</div>
      <div class="comment-option">
        <!-- 回复按钮 -->
        <el-button @click="handleClickReply" class="comment-reply-btn" link>回复</el-button>
        <!-- 点赞按钮 -->
        <el-button @click="handleClickStar" link>
          <el-icon :size="18">
            <Star />
          </el-icon>
        </el-button>
        <span v-if="starNum > 0">{{ starNum }}</span>
      </div>
    </div>
    <!-- 回复列表 -->
    <div class="comment-reply-list">

    </div>
  </div>
</template>

<script>
import { Star } from '@element-plus/icons-vue'
export default {
  name: 'CommentItem',
  components: {
    Star
  },
  props: {
    username: {
      type: String,
      default: 'Default username'
    },
    comment: {
      type: String,
      default: 'Default comment'
    },
    star: {
      type: Number,
      default: 0
    },
    date: {
      type: String,
      default: '2023/4/6 17:05'
    }
  },
  data() {
    return {
      starNum: 0
    }
  },
  mounted() {
    this.starNum = this.star
  },
  methods: {
    // 回复-点击事件
    handleClickReply() {

    },
    // 点赞-点击事件
    handleClickStar() {
      this.starNum++
    }
  }
}
</script>

<style lang="scss" scoped>
.comment-item-wrapper {
  &:not(:last-child) {
    margin-bottom: 14px;
  }

  .comment-username {
    font-size: 13pt;
    font-weight: bold;
  }

  .comment-intro {
    margin-top: 10px;
    color: var(--text-color-light);
    font-size: 12pt;
  }

  .bottom-warpper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-top: 8px;
    height: 30px;
    line-height: 30px;
    font-size: 12pt;

    .comment-date {
      color: var(--el-color-info);
    }

    .comment-option {
      display: flex;
      flex-direction: row;

      .comment-reply-btn {
        // margin-right: 10px;
        margin-top: 2px;
      }
    }
  }
}
</style>
